<template>
  <div id="unsure-form" class="g-unsure-form-page">
    <g-banner title="不确定表单" des="可根据后端配置动态生成不同类型的表单项"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">不确定表单</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div clearfix></div>
      </div>
    </a-affix>
    <div class="g-box">
      <el-form :model="form" label-width="100px" ref="form" class="g-form">
        <div v-for="(item, index) in formList" :key="index">
          <el-form-item v-if="item.fieldType == 'text'" :label="item.fieldName" :rules="item.rule" :prop="item.field">
            <el-input v-model="form[item.field]" :maxlength="item.config.maxLength+''" :placeholder="item.placeholder"
              :show-word-limit="item.config.showWordLimit" class="g-input-block"></el-input>
          </el-form-item>
          <el-form-item v-else-if="item.fieldType == 'number'" :label="item.fieldName" :rules="item.rule" :prop="item.field">
            <el-input-number v-model="form[item.field]"></el-input-number>
          </el-form-item>
          <el-form-item v-else-if="item.fieldType == 'checkbox'" :label="item.fieldName" :rules="item.rule" :prop="item.field">
            <el-select v-model="form[item.field]" class="g-input-block">
              <el-option v-for="subItem in item.options" :key="subItem.value" 
                :value="subItem.value" :label="subItem.label"></el-option>
            </el-select>
          </el-form-item>
          <p v-else>暂时不支持{{item.fieldType}}类型的表单</p>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      form: {},
      // 模拟后端请求到的数据
      formList: [
        { 
          field: 'name',
          fieldName: '姓名',
          fieldType: 'text',
          placeholder: '请输入姓名',
          config: {
            maxLength: 5,
            showWordLimit: true
          },
          rule: { required: true, message: '请输入姓名', trigger: 'blur' }
        },
        {
          field: 'age',
          fieldName: '年龄',
          fieldType: 'number',
          defaultValue: 20,
          config: null,
        },
        {
          field: 'address',
          fieldName: '地址',
          fieldType: 'checkbox',
          defaultValue: '1',
          options: [
            { value: '1', label: '山东' },
            { value: '2', label: '浙江' },
            { value: '3', label: '湖南' },
          ],
          config: null,
        },
      ]
    }
  },
  created() {
    this.loadFormlist()
  },
  methods: {
    getScrollingCon,
    loadFormlist() {
      // 此处请求表单列表数据
      this.formList.forEach( item => {
        this.$set(this.form, item.field, null)
        this.form[item.field] = item.defaultValue || null
      })
    },
    handleSubmit() {
      this.$refs.form.validate( isValid => {
        if(isValid) {
          console.log(this.form)
          this.$message.success('提交成功')
        } else {
          this.$message.warn('请检查表单项')
          return false
        }
      })
    }
  }
}
</script>